<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单校验</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .inputing{
            display: inline-block;
            font-size: 12px;
            width:100px;
            height: 20px;
            background: url('input.png') no-repeat 1px center;
            padding-left: 20px;
            color: darkgray;
        }
        .error{
            display: inline-block;
            font-size: 12px;
            width:100px;
            height: 20px;
            background: url('error.png') no-repeat 1px center;
            padding-left: 20px;
            color: rgba(255, 0, 0, 0.946);
        }
        .right{
            display: inline-block;
            font-size: 12px;
            width:100px;
            height: 20px;
            background: url('right.png') no-repeat 1px center;
            padding-left: 20px;
            color: rgb(4, 179, 4);
            
        }


    </style>
</head>
<body>
    <div id="box">
        <label for="">输入一个0-100的数</label>
        <input type="text" placeholder="输入一个数" id="input">
        <span class="">请吧~ </span>
    </div>
    <script>
        var input_obj = document.getElementById('input');
        var span_obj = document.getElementsByTagName('span')[0];
        input_obj.onfocus = function(){
            span_obj.innerHTML = '正在输入'
            span_obj.className = 'inputing'
            input_obj.style.border = ''
        }
        input_obj.onblur = function(){
            var value = parseFloat(this.value)
            console.log(isNaN(value))
            if(isNaN(value)){
                span_obj.innerHTML = '非法输入'
                span_obj.className = 'error'
                input_obj.style.border = 'red 2px solid'
            }else if(value >=0 && value <=100){
                span_obj.innerHTML = '输入正确'
                span_obj.className = 'right'
                input_obj.style.border = 'green 2px solid'
            }else{
                span_obj.innerHTML = '不在范围内'
                span_obj.className = 'error'
                input_obj.style.border = 'red 2px solid'
            }
        }
    </script>
</body>
</html>